.select2-container {
  font-size: $tx5;
  display: block;

  .select2-selection {
    border-radius: $corner;
    height: $formElementHeight;

    .select2-selection__rendered {
      line-height: $formElementHeight;
    }

    .select2-selection__arrow {
      height: $formElementHeight;
      width: $formElementHeight;

      b {
        border-width: 6px 5px 0 5px;
        margin-left: -6px;
        margin-top: -5px;
      }
    }
  }

  &.select2-container--open {
    &.select2-container--below {
      .select2-selection--single {
        border-bottom: 0;
      }
    }
  }

  .select2ImgOpt {
    display: flex;
    align-items: center;

    .emoji {
      height: 1em;
      width: 1em;
      margin-right: 0.3em;
    }
  }
}

.select2-container--default {
  &.select2-container--open {
    .select2-selection--single {
      .select2-selection__arrow {
        b {
          border-width: 0 5px 6px 5px;
        }
      }
    }
  }
}

// In order for these styles also work on the drop down part of the component, when
// initializing the plugin, you will need to specify a dropdownParent targetting an
// element with the .select2Small class.
.select2Small .select2-container,
.select2Small + .select2-container {
  font-size: $tx6;

  .select2-selection {
    height: 3rem;

    .select2-selection__rendered {
      padding-left: 6px;
      line-height: 3rem;
    }

    .select2-selection__arrow {
      height: 3.25rem;
      width: 2.75rem;
    }
  }

  .select2-results__option {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

// Tags (the element that select2 is generated off of must have a class of 'select2Tags').
// Some focus styling is with other form focus styling in form.scss.
.select2TagsWrap {
  position: relative;
  width: 100%;

  .select2Tags + .select2-container {
    &.select2-container--default {
      .select2-selection--multiple {
        height: auto;
      }

      .select2-selection--multiple .select2-selection__rendered {
        padding-bottom: $padSm;
        border-radius: 3px;
      }

      .select2-search--inline {
        padding: 1px; // match the border on the tags
        margin-top: 5px;
        line-height:27px;
      }
    }

    &.select2-container--default .select2-selection--multiple .select2-selection__choice {
      padding-left: $pad;
      font-weight: 500;
      line-height:27px;

      .select2-selection__choice__remove {
        float: right;
        font-size: 2rem;
        font-weight: 100;
        position: relative;
        top: -2px;
        margin-left: 5px;
      }
    }

    &.select2-container--focus {
      .select2-selection {
        border: none;
      }

      & + .tagsPlaceholder {
        display: none;
      }
    }
  }

  &.hashPrefacedTags .select2Tags + .select2-container .select2-selection__choice {
    &::before {
      content: '#';
    }
  }

  .tagsPlaceholder {
    display: none;
    position: absolute;
    top: 15px;
    margin-left: 10px;
    pointer-events: none;

    // For now, since we're not styling placeholders anywhere, I'll
    // manually style here. If we ever do style ::placeholder elements,
    // we should make sure to add .placeholder to that selector and then
    // these styles could go away
    font-size: 1.4rem;
    color: #aaa;

    // This class must be set via JS
    &.emptyOfTags {
      display: block;
      top: 0;
      line-height: 27px;
      margin-top: 6px;
    }
  }

  &:not(.showDropdown) {
    .tagsDropdown {
      display: none;
    }
  }

  &.showDropdown {
    .tagsDropdown .select2-container--open {
      margin-top: -7px;
      border: none;
    }
  }

  .tagsDropdown {
    .select2-container--open {
      border: 1px solid;
    }
  }
}

.select2TagsWrapDropDown {
  @extend .select2TagsWrap;
}

.select2TagFlexWrap {
  // if the select2 tag input has to be in a flex row with other elements, it will overflow the
  // row if a tag is too long. Wrap select2TagsWrap in this class to prevent that.
  flex-grow: 1;
  overflow: hidden;
}
